feat(vue-router): upgrade to vue-router 5 by ShaneK · Pull Request #31117 · ionic-team/ionic-framework

ShaneK · 2026-05-06T17:47:01Z

Issue number: internal

What is the current behavior?

@ionic/vue-router and @ionic/vue build against vue-router 4

What is the new behavior?

Bumps vue-router to ^5.0.6 and vue to ^3.5.0 (vue-router 5 raises its peer to ^3.5.0). We also added Playwright tests for Vue router that are in full parity with the previous Jest and removed the Jest tests and replaced them with Playwright.

This PR also makes the current Vue test app, which is also used for the Vue Router automated tests, get rebuilt with the current PR version for testing in the Vercel preview links.

Does this introduce a breaking change?

Yes
No

Consumer apps that pin vue-router themselves need to upgrade to ^5.0.0, and apps that explicitly pin vue need to bump to ^3.5.0

Other information

CI changes: CI no longer runs npm run test.spec (the script and Jest devDeps are gone), and now runs playwright tests

Preview (Vue + Vue Router test app, demos both packages from this PR):
https://ionic-framework-git-feat-vue-router-upgrade-ionic1.vercel.app/vue/

…istory, and view stacks

…o feat/vue-router-upgrade

vercel · 2026-05-06T17:47:06Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 7, 2026 9:56pm

reslear · 2026-05-06T22:40:44Z

Nice, Will it work with vue-router/auto-routes ?

thetaPC · 2026-05-07T02:29:23Z

      shell: bash
      working-directory: ./packages/vue/test/build/${{ inputs.app }}
+    - name: 📦 Install Playwright Browsers
+      run: npx playwright install chromium


Why Chromium? The Angular tests don't pass in a browser.

The Angular tests actually still only run Chromium despite downloading all 3 browsers. Both the vue tests and react tests only download the browser they use. It could be worth maybe adding support for running all 3 browsers in the future, but I think most of those issues are caught in core.

If that's the case, can you either make a new PR or in this one to update the other frameworks to only use chromium. No need to inconsistent.

ShaneK · 2026-05-07T14:52:14Z

Nice, Will it work with vue-router/auto-routes ?

@reslear Hey, thanks! We don't test unplugin-vue-router / vue-router/auto-routes directly, but @ionic/vue-router consumes the standard vue-router 5 Router instance, so file-based route generation should behave the same as it does with plain vue-router 5, I'd expect.

thetaPC

LGTM, thank you!

All my comments are suggestions and not blockers. I found no issues during the manual testing.

thetaPC · 2026-05-07T02:41:36Z

We might want to consider making a global file for the packages. That way all the frameworks are consistent with their testing. We can always override them per framework as needed.

Yeah, that's probably a good idea, but outside of the scope of this PR for sure

thetaPC · 2026-05-07T13:27:52Z

+        ) {
+          (window as any).__ionSawInvisible = true;
+        }
+        if (m.type === 'childList') {


It can be beneficial to check if __ionSawInvisible is already true. I don't see the need to check the children if that's the case.

Suggested change

if (m.type === 'childList') {

if (!(window as any).__ionSawInvisible && m.type === 'childList') {

thetaPC · 2026-05-07T13:33:45Z

+export async function waitForAnimationsComplete(page: Page, selector: string): Promise<void> {
+  await page.evaluate(async (sel: string) => {
+    const el = document.querySelector(sel);
+    if (!el) return;


This function doesn't throw an error like the other 2. Is that intentional? It could be helpful to know that the element didn't exist.

thetaPC · 2026-05-07T13:53:45Z

+ * Ports the unit tests in packages/vue-router/__tests__/locationHistory.spec.ts
+ * to user-observable Playwright scenarios. Each describe block corresponds to
+ * one Jest case so the mapping is auditable when removing the Jest suite.
+ *


Not sure if we need this commented into the code. A comment on GitHub should be enough to let the reviewer know what changed.

Suggested change

* Ports the unit tests in packages/vue-router/__tests__/locationHistory.spec.ts

* to user-observable Playwright scenarios. Each describe block corresponds to

* one Jest case so the mapping is auditable when removing the Jest suite.

*

This was mostly for the future if I left the Jest tests in. I ultimately did not.
f898584

thetaPC · 2026-05-07T13:54:45Z

+ */
+
+test.describe('Location History', () => {
+  // Maps to: 'should correctly add an item to location history'


Related to my comment above. These comments can be left in GitHub but doesn't seem beneficial to keep in code.

thetaPC · 2026-05-07T17:03:09Z

+      name: 'Mobile Chrome',
+      use: {
+        browserName: 'chromium',
+        ...devices['Pixel 5'],


Why is this one testing a phone while Angular tests a desktop?

Swipe-to-go-back is iOS-only and only fires on a touch viewport, so the gesture tests need a phone device profile. The Angular suite doesn't exercise gestures, so a desktop chrome viewport is fine there.

It also doesn't make a lot of sense to me that we'd test on non-mobile views primarily considering most of our use case is mobile views

thetaPC · 2026-05-07T17:10:56Z

      shell: bash
      working-directory: ./packages/vue/test/build/${{ inputs.app }}
+    - name: 📦 Install Playwright Browsers
+      run: npx playwright install chromium


If that's the case, can you either make a new PR or in this one to update the other frameworks to only use chromium. No need to inconsistent.

thetaPC · 2026-05-07T17:13:19Z

Please mention how to use this in the Vue testing docs. Either in this PR or a new one, also add it for React Router.

thetaPC · 2026-05-07T17:53:38Z

Any chance we can get the mode switch like in React?

brandyscarney

I found some issues while testing that I left as a comment on Jira. Great updates otherwise!

brandyscarney · 2026-05-07T18:26:03Z

+
+The `@ionic/vue-router` package now requires Vue Router v5. Vue Router v4 is no longer supported. Vue Router v5 also raises its peer requirement on Vue itself, so the minimum supported Vue version moves to `3.5.0`.
+
+**Minimum Version Requirements**


Can we also open a PR to update this on the docs site: https://ionicframework.com/docs/reference/support#ionic-vue

Side note: we should probably add columns for the supported router version as well.

ionic-team/ionic-docs#4491

I meant add it to the support table here: https://github.com/ionic-team/ionic-docs/blob/1c612e718a370241cdb92ef0f1a0bc6e2e1480fa/docs/reference/support.md?plain=1#L75-L82

ShaneK added 7 commits April 30, 2026 13:47

chore(vue-router): add test runner script and bump typescript to 5.7.3

7283821

test(vue-router): add playwright e2e suite for animations, location h…

f32b10f

…istory, and view stacks

Merge branch 'major-9.0' of github.com:ionic-team/ionic-framework int…

474100b

…o feat/vue-router-upgrade

feat(vue-router): upgrade to vue-router 5

573370f

Merge branch 'major-9.0' of github.com:ionic-team/ionic-framework int…

cae877b

…o feat/vue-router-upgrade

chore(deps): regenerate vue-router 5 lockfiles

c5113e9

chore(test): removing vue jest tests, adding playwright tests to CI

e1dd044

ShaneK requested a review from a team as a code owner May 6, 2026 17:47

ShaneK requested a review from gnbm May 6, 2026 17:47

github-actions Bot added package: core @ionic/core package package: vue @ionic/vue package package: react @ionic/react package labels May 6, 2026

vercel Bot deployed to Preview May 6, 2026 17:47 View deployment

ShaneK changed the title ~~Feat/vue router upgrade~~ feat(vue-router): upgrade to vue-router 5 May 6, 2026

chore(breaking): updating breaking.md

3f69ec4

ShaneK force-pushed the feat/vue-router-upgrade branch from 561f950 to 3f69ec4 Compare May 6, 2026 18:09

github-actions Bot removed the package: react @ionic/react package label May 6, 2026

vercel Bot deployed to Preview May 6, 2026 18:15 View deployment

thetaPC reviewed May 7, 2026

View reviewed changes

Comment thread packages/vue-router/scripts/test_runner.sh Outdated

thetaPC reviewed May 7, 2026

View reviewed changes

Comment thread packages/vue-router/package.json

thetaPC reviewed May 7, 2026

View reviewed changes

Comment thread packages/vue/test/apps/vue3/package.json

ShaneK added 2 commits May 7, 2026 07:52

chore(test): cleanup

9f89730

chore(git): merge

9dc915a

vercel Bot deployed to Preview May 7, 2026 15:01 View deployment

thetaPC reviewed May 7, 2026

View reviewed changes

thetaPC removed the request for review from gnbm May 7, 2026 18:12

thetaPC requested a review from brandyscarney May 7, 2026 18:12

brandyscarney reviewed May 7, 2026

View reviewed changes

chore(test): address PR feedback on vue-router playwright suite

f898584

vercel Bot deployed to Preview May 7, 2026 21:28 View deployment

chore(test): add mode switcher to vue test app

2d0023d

vercel Bot deployed to Preview May 7, 2026 21:56 View deployment

	if (m.type === 'childList') {
	if (!(window as any).__ionSawInvisible && m.type === 'childList') {


		The `@ionic/vue-router` package now requires Vue Router v5. Vue Router v4 is no longer supported. Vue Router v5 also raises its peer requirement on Vue itself, so the minimum supported Vue version moves to `3.5.0`.

		Minimum Version Requirements

Conversation

ShaneK commented May 6, 2026

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

reslear commented May 6, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShaneK May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ShaneK commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

vercel Bot commented May 6, 2026 •

edited

Loading

ShaneK May 7, 2026 •

edited

Loading

ShaneK commented May 7, 2026 •

edited

Loading